<template>
	<view>
		<canvas :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px'}" style="border-radius: 10px;"></canvas>
	</view>
</template>

<script>
	var _this;
	export default {
		name: 'wm-poster',
		props: {
			CanvasID: { //CanvasID 等同于 canvas-id
				Type: String,
				default: 'PosterCanvas'
			},
			imgSrc: { //展示图
				Type: String,
				default: ''
			},
			QrSrc: { //二维码
				Type: String,
				default: ''
			},
			LogoSrc: {
				Type: String,
				default: ''
			},
			Title: { //文本内容
				Type: String,
				default: ''
			},
			TitleColor: { //标题颜色
				Type: String,
				default: '#333333'
			},
			LineType: { //标题显示行数		
				Type: [String, Boolean],
				default: false
			},
			Time: { //时间
				Type: String,
				default: '2018/08/31'
			},
			OriginalColor: { //默认颜色
				Type: String,
				default: '#b8b8b8'
			},
			Width: { //画布宽度  (高度根据图片比例计算 单位upx)
				Type: String,
				default: 750
			},
			CanvasBg: { //canvas画布背景色
				Type: String,
				default: '#ffffff'
			},
			Referrer: { //推荐人信息
				Type: String,
				default: 'quitter推荐给你'
			},
			ViewDetails: { //描述提示文字
				Type: String,
				default: '长按或扫描识别二维码'
			},
			price:{
				Type: String,
				default: '暂无售价'
			},
			publish:{
				Type: String,
				default: '未知'
			},
			address:{
				Type: String,
				default: '未知'
			}
		},
		data() {
			return {
				canvasW: 0,
				canvasH: 0,
				canvasImgSrc: '',
				ctx: null
			};
		},
		methods: {
			async OnCanvas() {
				_this.ctx = uni.createCanvasContext(_this.CanvasID, this);
				const C_W = uni.upx2px(_this.Width), //canvas宽度
					C_P = uni.upx2px(30), //canvas Paddng 间距
					C_Q = uni.upx2px(216), //二维码或太阳码宽高
					L_W = uni.upx2px(198),
					L_H = uni.upx2px(56);
				let _strlineW = 0; //文本宽度
					let _imgInfo = await _this.getImageInfo({
						imgSrc: _this.imgSrc
					}); //广告图
					let _QrCode = await _this.getImageInfo({
						imgSrc: _this.QrSrc
					}); //二维码或太阳码
					let r = [_imgInfo.width, _imgInfo.height];
					let q = [_QrCode.width, _QrCode.height];
					let l = [L_W, L_H];
					let imgW = C_W - C_P * 2;
					if (r[0] != imgW) {
					    r[1] = Math.floor((imgW / r[0]) * r[1]);
						r[0] = imgW;
					}
					if (q[0] != C_Q) {
						q[1] = Math.floor((C_Q / q[0]) * q[1]);
						q[0] = C_Q;
					}
					_this.canvasW = C_W;
					_this.canvasH = r[1] + q[1] + 1000;
					_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
					_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小

					//添加图片展示
					_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
					//添加图片展示 end

					//设置文本
					_this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
					_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
					let _strLastIndex = 0; //每次开始截取的字符串的索引
					let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
					let _num = 1;
					for (let i = 0; i < _this.Title.length; i++) {
						_strlineW += _this.ctx.measureText(_this.Title[i]).width;
						if (_strlineW + 16 > r[0]) {
							if (_num == 2 && _this.LineType) {
								//文字换行数量大于二进行省略号处理
								_this.ctx.fillText(_this.Title.substring(_strLastIndex, i - 8) + '...', C_P, _strHeight);
								_strlineW = 0;
								_strLastIndex = i;
								_num++;
								break;
							} else {
								if (_num == 1) {
									_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
								} else {
									_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
								}
								_strlineW = 0;
								_strHeight += 20;
								_strLastIndex = i;
								_num++;
							}
						} else if (i == _this.Title.length - 1) {
							_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
							_strlineW = 0;
						}
					}
					//设置文本 end
				
					
					//设置时间
					_strlineW = C_P;
					if (_num == 1) {
						_strHeight += 20; //单行标题时占位符
					}else{
						_strHeight += uni.upx2px(30);					
					}
					//设置时间 end
					
					// 添加分割线
					_this.ctx.setFontSize(uni.upx2px(24));
					_this.ctx.moveTo(C_P,_strHeight)
					_this.ctx.lineTo(r[0]+C_P,_strHeight)
					_this.ctx.strokeStyle = '#F0F0F0'
					_this.ctx.stroke()
					
					// 添加房源信息
					_strHeight += uni.upx2px(60);
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle('#A6A6A6'); //设置标题文本颜色
					_this.ctx.fillText('单价',C_P,_strHeight)
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle('#FE9E2E'); //设置标题文本颜色
					_this.ctx.fillText(_this.price,C_P*4,_strHeight)
					_strHeight += uni.upx2px(45);
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle('#A6A6A6'); //设置标题文本颜色
					_this.ctx.fillText('开盘',C_P,_strHeight)
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
					_this.ctx.fillText(_this.publish,C_P*4,_strHeight)
					_strHeight += uni.upx2px(45);
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle('#A6A6A6'); //设置标题文本颜色
					_this.ctx.fillText('地址',C_P,_strHeight)
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle('#3270BD'); //设置标题文本颜色
					_this.ctx.fillText(_this.address,C_P*4,_strHeight)
					
					_strHeight += uni.upx2px(30);
					_this.ctx.setFontSize(uni.upx2px(24));
					_this.ctx.moveTo(C_P,_strHeight)
					_this.ctx.lineTo(r[0]+C_P,_strHeight)
					_this.ctx.strokeStyle = '#F0F0F0'
					_this.ctx.stroke()
					
					_strHeight += uni.upx2px(60);
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
					_this.ctx.fillText('长按识别二维码', r[0]/2-C_P*2.5, _strHeight)
					
					//添加二维码
					_strHeight += uni.upx2px(30);
					_this.ctx.drawImage(_QrCode.path, r[0]/2-C_P*3, _strHeight, q[0], q[1]);
					//添加二维码 end
					
					_strHeight += q[1]+uni.upx2px(30);
					_this.ctx.setFontSize(uni.upx2px(28)); //设置标题字体大小
					_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
					_this.ctx.fillText('英棒房产 海量房源', r[0]/2-C_P*3, _strHeight)

					_this.canvasH = _strHeight+30;
					//延迟后渲染至canvas上
					setTimeout(function() {
						_this.ctx.draw(true, (ret) => {
							_this.getNewImage();
						});
					}, 600);
			},
			async getImageInfo({
				imgSrc
			}) {
				return new Promise((resolve, errs) => {
					uni.getImageInfo({
						src: imgSrc,
						success: function(image) {
							resolve(image);
						},
						fail(err) {
							errs(err);
						}
					});
				});
			},
			getNewImage() {
				uni.canvasToTempFilePath({
					canvasId: _this.CanvasID,
					quality: 1,
					complete: (res) => {
						_this.$emit('success', res);
					}
				}, this);
			}

		},
		mounted() {
			_this = this;
			setTimeout(() =>{
				_this.OnCanvas();
			},1000)
		}
	};
</script>

<style></style>
